<template>
	<view class="page-section-swiper">
		<swiper 
			class="swiper" 
			:indicator-color="'#aaa'"
			:indicator-active-color="'#fff'"
			autoplay="false" 
			:interval="interval" 
			duration="500"
			:circular="true"
			:indicator-dots="indicatorDots"
			:style="{height: swiperHeight}"
			>
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="clickItem(item)">
					<image :src="item.icon" mode="aspectFill"></image>
				</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { menuCheck } from "../../mixins/menuCheck.js"
	export default {
		mixins:[ menuCheck ], //混入文件
		data() {
			return {
			}
		},
		props: { //此处定义传入的参数
			bannerList: {
				type: Array,
				defaults() {
					return []
				}
			},
			indicatorDots: {
				type: Boolean,
				default: false
			},
			swiperHeight: {
				type: String,
				default: '150px'
			},
			interval: {
				type: String,
				default: '5000'
			}
			// swiperStyle: {
			// 	type: Object,
			// 	defaults() {
			// 		return {}
			// 	}
			// }
		},
		filters: {
		},
		methods: {
		}
	}
</script>

<style>
	.page-section-swiper {
		width: 100%;
	}
	/* 轮播图高度 */
	.swiper{
	}
	/* swiper-item 里面的图片高度 */
	swiper-item image{
		width: 100%;
		height: 100%;
	}
</style>
